<template>
	<view class="detail" v-if="Object.keys(songDetail).length > 0">
		<view class="fixbg" :style="{ 'background-image': 'url(' + songDetail.al.picUrl + ')' }"></view>
		<musichead :title="songDetail.name" :icon="true" color="white"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<view class="detail-play" @tap="handleToPlay">
					<image :class="{ 'detail-play-run': isPlayRotate }" :src="songDetail.al.picUrl" mode=""></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view class=""></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{ transform: 'translateY(' + -(lyricIndex - 1) * 82 + 'rpx)' }">
						<view class="detail-lyric-item" :class="{ active: lyricIndex == index }" v-for="(item, index) in songLyric" :key="index">{{ item.lyric }}</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view @tap="handleDownloadFile">下载音乐</view>
				<!-- #endif -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听过</view>
					<view class="detail-like-item" v-for="(item, index) in songSimi" :key="index" @tap="handleToSimi(item.id)">
						<view class="detail-like-img"><image :src="item.album.picUrl" mode=""></image></view>
						<view class="detail-like-song">
							<view class="">{{ item.name }}</view>
							<view class="">
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70" src="../../../static/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="../../../static/sq.png" mode=""></image>
								{{ item.album.artists[0].name }} - {{ item.name }}
							</view>
						</view>
						<text class="iconfont iconbofang"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item, index) in songComment" :key="index">
						<view class="detail-comment-img"><image :src="item.user.avatarUrl" mode=""></image></view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view class="">{{ item.user.nickname }}</view>
									<view class="">{{ item.time | formatTime }}</view>
								</view>
								<view class="detail-comment-like">
									{{ item.likedCount | formatCount }}
									<text class="iconfont iconlike"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{ item.content }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import '@/common/iconfont.css';
import musichead from '@/components/controlled/musichead/musichead.vue';
import { songDetail, songSimi, songComment, songLyric, songUrl } from '@/common/api.js';
import { mapMutations } from 'vuex';
export default {
	components: { musichead },
	data() {
		return {
			songDetail: {},
			songSimi: [],
			songComment: [],
			songLyric: [],
			lyricIndex: 0,
			iconPlay: 'iconpause',
			isPlayRotate: true,
			isLoading: true
		};
	},
	onLoad(options) {
		// console.log(options.songId);
		this.getMysic(options.songId);
	},
	onUnload() {
		this.cancelLyricIndex();
		// #ifdef H5
		this.bgAudioManager.destroy();
		// #endif
	},
	onHide() {
		this.cancelLyricIndex();
		// #ifdef H5
		this.bgAudioManager.destroy();
		// #endif
	},
	methods: {
		...mapMutations(['NEXT_ID']),
		getMysic(songId) {
			this.NEXT_ID(songId);
			uni.showLoading({
				title: '加载中...'
			});
			this.isLoading = true;
			Promise.all([songDetail({ id: songId }), songSimi({ id: songId }), songComment({ id: songId }), songLyric({ id: songId }), songUrl({ id: songId })]).then(res => {
				// console.log(res);
				if (res[0].data.code == 200) {
					this.songDetail = res[0].data.songs[0];
				}
				if (res[1].data.code == 200) {
					this.songSimi = res[1].data.songs;
				}
				if (res[2].data.code == 200) {
					this.songComment = res[2].data.hotComments;
				}
				if (res[3].data.code == 200) {
					let lyric = res[3].data.lrc.lyric;
					let re = /\[([^\]]+)\]([^\[]+)/g;
					let result = [];
					// console.log(lyric);
					lyric.replace(re, ($0, $1, $2) => {
						result.push({ time: this.formatTimeToSec($1), lyric: $2 });
					});
					this.songLyric = result;
				}
				if (res[4].data.code == 200) {
					// #ifdef MP-WEIXIN
					this.bgAudioManager = uni.getBackgroundAudioManager();
					this.bgAudioManager.title = this.songDetail.name;
					// #endif
					// #ifdef H5
					if (!this.bgAudioManager) {
						this.bgAudioManager = uni.createInnerAudioContext();
					}
					this.iconPlay = 'iconbofang1';
					this.isPlayRotate = false;
					// #endif
					this.bgAudioManager.src = res[4].data.data[0].url || '';
					this.listenLyricIndex();
					this.bgAudioManager.onPlay(() => {
						this.iconPlay = 'iconpause';
						this.isPlayRotate = true;
						this.listenLyricIndex();
					});
					this.bgAudioManager.onPause(() => {
						this.iconPlay = 'iconbofang1';
						this.isPlayRotate = false;
						this.cancelLyricIndex();
					});
					this.bgAudioManager.onEnded(() => {
						// this.getMysic(this.$store.state.nextId);
						this.bgAudioManager.play();
					});
				}
				this.isLoading = false;
				uni.hideLoading();
			});
		},
		formatTimeToSec(value) {
			let arr = value.split(':');
			return (Number(arr[0] * 60) + Number(arr[1])).toFixed(1);
		},
		handleToPlay() {
			if (this.bgAudioManager.paused) {
				this.bgAudioManager.play();
			} else {
				this.bgAudioManager.pause();
			}
		},
		listenLyricIndex() {
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				for (let i = 0; i < this.songLyric.length; i++) {
					if (this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1].time) {
						this.lyricIndex = this.songLyric.length - 1;
						break;
					}
					if (this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i + 1].time) {
						this.lyricIndex = i;
					}
				}
			}, 500);
		},
		cancelLyricIndex() {
			clearInterval(this.timer);
		},
		handleToSimi(id) {
			this.getMysic(id);
		},
		handleDownloadFile() {
			let musicSrc = this.bgAudioManager.src;
			let link = document.createElement('a');
			link.download = '音频.mp3';
			link.href = musicSrc;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
	}
};
</script>

<style lang="less" scoped>
.detail {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background: url(~@/static/disc.png);
		background-size: cover;
		margin: 214rpx auto 0 auto;
		position: relative;
		image {
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			animation: 10s linear move infinite;
			animation-play-state: paused;
		}
		.detail-play-run {
			animation-play-state: running;
		}
		text {
			width: 100rpx;
			height: 100rpx;
			font-size: 100rpx;
			color: white;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		view {
			width: 230rpx;
			height: 360rpx;
			background: url(~@/static/needle.png);
			position: absolute;
			left: 230rpx;
			top: -200rpx;
			margin: auto;
			background-size: cover;
		}
	}
	.detail-lyric {
		font-size: 32rpx;
		line-height: 82rpx;
		height: 246rpx;
		text-align: center;
		overflow: hidden;
		color: #6f6f6f;
		.detail-lyric-wrap {
			transition: 0.5s;
			.detail-lyric-item {
				height: 82rpx;
				&.active {
					color: #fff;
				}
			}
		}
	}
	.detail-like {
		margin: 0 30rpx;
		.detail-like-head {
			font-size: 36rpx;
			color: white;
			margin: 50rpx 0;
		}
		.detail-like-item {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			.detail-like-img {
				width: 82rpx;
				height: 82rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.detail-like-song {
				flex: 1;
				color: #c6c2bf;
				view:nth-of-type(1) {
					font-size: 28rpx;
					color: white;
					margin-bottom: 12rpx;
				}
				view:nth-of-type(2) {
					font-size: 22rpx;
				}
				image {
					width: 26rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
			text {
				font-size: 50rpx;
				color: #c6c2bf;
			}
		}
	}
	.detail-comment {
		margin: 0 30rpx;
		.detail-comment-head {
			font-size: 36rpx;
			color: white;
			margin: 50rpx 0;
		}
		.detail-comment-item {
			margin-bottom: 28rpx;
			display: flex;
			.detail-comment-img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 18rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.detail-comment-content {
				flex: 1;
				color: #cbcacf;
				.detail-comment-title {
					display: flex;
					justify-content: space-between;
					.detail-comment-name {
						view {
							&:nth-of-type(1) {
								font-size: 26rpx;
							}
							&:nth-of-type(2) {
								font-size: 20rpx;
							}
						}
					}
					.detail-comment-like {
						font-size: 28rpx;
					}
				}
				.detail-comment-text {
					font-size: 28rpx;
					line-height: 40rpx;
					color: white;
					margin-top: 20rpx;
					border-bottom: 1px solid #e0e0e0;
					padding-bottom: 40rpx;
				}
			}
		}
	}
}
@keyframes move {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
